<template>
  <div class="card">
    <a-form-model ref="formRef" :rules="ruleForm" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-form-model-item label="手机号码" prop="child">
        <a-input
          v-model="form.child"
          :allowClear="true"
          style="width: 300px; margin-right: 10px"
          placeholder="请输入本平台注册过的手机号码"
        >
        </a-input>
        <span><span style="color: red">*</span> 必须是已注册的会员</span>
      </a-form-model-item>
      <a-form-model-item label="所属上级">
        <a-input
          v-model="form.parent"
          :allowClear="true"
          style="width: 300px; margin-right: 10px"
          placeholder="请输入上级手机号"
        >
        </a-input>
        <span><span style="color: red">*</span> 所属上级手机号码(不写则为平台直推用户)</span>
      </a-form-model-item>
      <a-form-model-item label="包含自身">
        <a-radio-group v-model="form.without_self" style="width: 310px" name="radioGroup" :default-value="1">
          <a-radio :value="0"> 是 </a-radio>
          <a-radio :value="1"> 否 </a-radio>
        </a-radio-group>
        <span><span style="color: red">*</span> 是否包含自身(选否将修改其所有下级用户，自身不做处理) </span>
        <div>
          <a-button style="margin-right: 10px" type="primary" @click="save">保存</a-button>
          <a-button>重置</a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { userAboutEditAPI } from '@/api/userinfo.js'
export default {
  name: 'RelatEdit',
  data() {
    return {
      form: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        child: '',
        parent: '',
        without_self: '1'
      },
      ruleForm: {
        child: [{ required: true, message: '请输入注册过的手机号码' }]
      }
    }
  },
  methods: {
    save() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          await userAboutEditAPI(this.form)
          this.$message.success('操作成功')
        } catch (error) {
          this.$message.error(error.data.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
